<template>
  <!-- <view class="canvas-wrap" style="position: relative;" :style="{width: '489rpx',height: '871rpx'}"> -->
  <view class="canvas-wrap" style="position: relative;">
    <!-- <tki-qrcode class="tkiQrcode" :cid="'qrcode' + index" :ref="'qrcode' + index" :val="val" unit="upx" :icon="icon" :size="330" :onval="true" :loadMake="true" :showLoading="true" @result="qrR"/> -->
    <canvas :style="{width: '750rpx',height: '1334rpx'}" :canvas-id="canvasId" style="position: absolute;top: 0;"></canvas>
  </view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
  props: {
    val: String,
    canvasId: String,
    bgImage: String,
    index: Number
  },
  data () {
    return {
      path: '',
      posterImg: '',
      icon: this.$store.state.imgBaseUrl + '/logo_small.png'
    }
  },
  components: {
    tkiQrcode
  },
  mounted () {
    if (this.val) {
      this.path = this.val;
      this.drawCanvas();
    }
  },
  methods: {
    // qrR (path) {
    //   if (path == '') {
    //     uni.showToast({
    //       title: '生成失败，请重试',
    //       icon: 'none'
    //     });
    //     return;
    //   }
    //   this.path = path;
    //   this.drawCanvas();
    // },
    drawCanvas () {
      uni.showLoading({
        title: '海报生成中',
        mask: true
      })
      let that = this;
      const ctx = uni.createCanvasContext(this.canvasId);
      ctx.drawImage(this.bgImage, 0, 0, uni.upx2px(750), uni.upx2px(1334));
      // console.log((this.$store.state.imgBaseUrl + '/invite/qrcode_bg.jpg'));
      ctx.drawImage(this.path, uni.upx2px(262), uni.upx2px(740), uni.upx2px(230), uni.upx2px(230))
      ctx.draw(true, function () {
        uni.canvasToTempFilePath({
          canvasId: that.canvasId,
          success (res) {
            that.posterImg = res.tempFilePath;
            that.$emit('updateQRCodeUrl', {
              url: res.tempFilePath,
              index: that.index
            });
          },
          fail (res) {
            uni.showToast({
              title: '生成二维码失败',
              icon: 'none'
            })
          },
        })
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .canvas-wrap {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .tkiQrcode {
    position: fixed;
    top: -99999upx;
    left: -99999upx;
    z-index: -99999;
  }
</style>
